<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Game Show</title>
<link type="text/css" href="css/view.css" rel="stylesheet" />
<!--core script file-->
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/DrawUtil.js"></script>
<script type="text/javascript" src="js/Matrix.js"></script>
<script type="text/javascript" src="js/BspScene.js"></script>
<script type="text/javascript" src="js/Shader.js"></script>
<script type="text/javascript" src="js/BoxSky.js"></script>
<script type="text/javascript" src="js/Billboard.js"></script>
<script type="text/javascript" src="js/Material.js"></script>

<!--main script-->
<script type="text/javascript">

var increase_time = 0;
var frame_num = 0;
var scene_file = 'hipub.bsp';
var shader_src = 'mario.shader';

//define the key num
var key_pressed = new Array(128);
var zAngle	= 0;
var xAngle  = 0;

var node_bsp = 0;
var node_sky = 0;
var node_billboard_sky = 0;

function slUpdate( context, elapsedtime )
{
	frame_num++;
	increase_time += elapsedtime;
	// out put the fps
	if( increase_time >= 1000 )
	{
		// attach the fps value and reset 
		$('#fps').html(frame_num);
		increase_time = 0;
		frame_num = 0;
	}
}
var cam_matrix = new slMatrix();
function slKeyevent( context )
{
	var dir = [0, 0, 0];
	if( key_pressed['W'.charCodeAt(0)])
	{
		dir[2] -= 1;
	}
	
	if( key_pressed['S'.charCodeAt(0)])
	{
		dir[2] += 1;
	}
	
	if( key_pressed['A'.charCodeAt(0)])
	{
		dir[0] -= 1;
	}
	
	if( key_pressed['D'.charCodeAt(0)])
	{
		dir[0] += 1;
	}
	
	if( dir[0] != 0 || dir[1] != 0 || dir[2] != 0 )
	{
		// move the camera
		slTranslate ( context.view, dir[0], dir[1], dir[2] );
	}
	if( zAngle != 0 )
		slRotate(context.view, 0.0, 1.0, 0.0, zAngle);
};

function slDraw( context )
{
	if (context)
	{	
	   // Set the viewport
	   gl.viewport ( 0, 0, context.width, context.height );

	   // Clear the color buffer
	   gl.clear ( gl.COLOR_BUFFER_BIT );

	   if( node_billboard_sky )
		 node_billboard_sky.draw( context );
	   
	   //if( node_sky )
	    // node_sky.draw( context );

	   if( node_bsp )
		node_bsp.draw( context );
	}
	
}

function slInitialise( context )
{
	//create the data and parse somefile
	if(gl == null)
	{
		alert("error:gl is null ");
		return false;
	}
	
	// initialize projection base on the viewport'width and viewport'height
	slMatrixLoadIdentity(context.projection);
	slMatrixLoadIdentity(context.view);
	slPerspective( context.projection, 25.0, context.width / context.height, 1.0, 10000.0 );
	
	slTranslate( context.view, 0.0, 0.0, -500.0 );
	slRotate(context.view, 1.0, 0.0, 0.0, 90 );
	gl.clearColor ( 0.0, 0.0, 0.0, 1.0 );
	
	return true;
}

function slInitScene( bsp, url )
{
	bsp.loadShaders([shader_src]);
	bsp.load(url);
	return true;
}

function slInitShader( gl )
{
	slShader.init( gl );
	return true;
}

function slInitEvent()
{
	$(window).keydown( function(event){
				key_pressed[event.keyCode] = true;	
			}
	);
	
	$(window).keypress( function(event){
				//key_pressed[event.keyCode] = false;
			}
	);
	
	$(window).keyup( function(event){
			key_pressed[event.keyCode] = false;
		}
	);
	
	var mouse_state = false;
	var last_x = 0;
	var last_y = 0;
	$('#viewport').mousedown( function( event ){
			 if( event.which == 1 )
				 mouse_state = true;
			 last_x = event.pageX;
			 last_y = event.pageY;
		}
	);
	
	$('#viewport').mouseup( function( event ){	
				mouse_state = false;
				zAngle = 0;
		}
	);
	
	$('#viewport').mousemove( function( event ){
			
			var xDelta = event.pageX - last_x;
			var yDelta = event.pageY - last_y;
			last_x = event.pageX;
			last_y = event.pageY;
			
			if( mouse_state )
			{
				zAngle += xDelta * 0.025;
				//while( zAngle < 0 )
				//	zAngle += Math.PI * 2;
				//while( zAngle >= Math.PI * 2 )
				//	zAngle -= Math.PI * 2;
				
				xAngle += yDelta * 0.025;
				while( xAngle < -Math.PI * 0.5 )
					xAngle = -Math.PI * 0.5; 
				while( xAngle > Math.PI * 0.5 )
					xAngle = Math.PI * 0.5;
				
			}
			
		}
	);
	
	return true;
}

function slMain()
{
	// deal with setting event  
	$('#showFPS').change(function() {
    if($('#showFPS:checked').length) {

         $('#fps-counter').show();

       } else {

            $('#fps-counter').hide();

       }
	});
	
	// get the viewport
	var canvas = document.getElementById("viewport");
	
	var context = new slContext();

	// init the context
	slInitContext( context, canvas );
	
	// 
	if( !gl )
	{
		$('#viewport-frame').remove();
		$('#webgl-error').show();
	}
	else
	{
		slInitEvent();
	}
	

	node_bsp = new slBspScene( gl );
	// init the scene
	slInitScene( node_bsp, scene_file );
	
	node_sky = new slBoxSky( gl );
	node_sky.init();
	
	node_billboard_sky = new slBillboard( gl );
	node_billboard_sky.init();
	
	if( !slInitialise( context ) )
	{
		alert("fail to create context ");
		return;	
	}
	
	if( !slInitShader( gl ) )
	{
		alert("fail to create shader" );
		return;
	}
	
	slRegisterDrawFunc( context, slDraw );
	slRegisterUpateFunc( context, slUpdate );
	slRegisterKeyFunc( context, slKeyevent );
	
	slMainLoop( context );
	
};
$(slMain);
</script>

</head>
<body>
		<div id="viewport-frame">
			<canvas id="viewport" width="800px" height="600px"> Sorry,
			but your browser does not support for this game, <br />
			To get a webGl-enabled browser,pleas see: <br />
			<a href="www.f12k.com">Get The WebGl Enable Browser</a> </canvas>
			<div id="fps-counter">
				FPS: <span id="fps">0</span>
			</div>
		</div>
		<div id="webgl-error"
			style="display: none; text-align: center; vertical-align: middle;">
			sorry, but your browser does not support WebGL or does have it
			enable: <br /> To get a WebGL-enable browser, please see:'' <br />
			<a href="" target="_blank"> Getting a WebGL Implementation</a>
		</div>
		<div id="viewport-info">
			<div id="controls">
				<h3>Controls</h3>
				<ul>
					<li><b>Look:</b> Click and Drag</li>

					<li><b>MoveMent:</b> W,A,S,D</li>

					<li><b>Jump:</b> space</li>

					<li><b>Respawn:</b> R</li>
				</ul>
			</div>

			<div id="config">
				<h3>Settings</h3>
				<ul>
					<li><b>Show Fps:</b> <input type="checkbox" , id="showFPS"
						checked="checked" />
					</li>

					<li><b>Background Music:</b> <input type="checkbox"
						, id="playMusic" checked="checked" />
					</li>

					<li><b>Highlight Shader:</b> <select id="ShaderSelect">
							<option>Loading....</option>
					</select>
					</li>
				</ul>
			</div>

		</div>
	</div>
</body>
</html>

